<template>
  <div class="projectPlanManage">
    <el-card>
      <table-data
        v-if="action === ACTION_TYPE.LIST"
        @add="
          action = ACTION_TYPE.ADD;
          oprType = OPR_TYPE.ADD;
        "
        @edit="handleEdit"
      />
      <detail-form-data
        v-else
        ref="formDataRef"
        :opr-type="oprType"
        @back="action = ACTION_TYPE.LIST"
      />
    </el-card>
  </div>
</template>

<script>
import tableData from './components/tableData'
import {
  ACTION_TYPE,
  OPR_TYPE
} from '@/views/wxaReservationModule/views/projectPlanManage/config'
import detailFormData from './components/detaiFormData'

export default {
  name: 'Index',
  components: { tableData, detailFormData },
  data() {
    return {
      ACTION_TYPE,
      action: ACTION_TYPE.LIST,
      OPR_TYPE,
      oprType: OPR_TYPE.ADD
    }
  },
  methods: {
    handleEdit(row) {
      this.action = ACTION_TYPE.ADD
      this.oprType = OPR_TYPE.EDIT
      this.$nextTick(() => {
        this.$refs.formDataRef.setQuery(row)
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
